<template>
  <!-- 歌单头部部分-->
    <el-row>
        <el-col :span="5">
            <ItemImg :image-detail="imageDetail"/>
        </el-col>
        <el-col :span="18" :offset="1">
            <div>
                <div class="list-title">{{ details.title }}</div>
                <div class="list-creator">Playlist by {{ details.creator }}</div>
                <div class="list-update-time">
                    最后更新于{{ timestampToTime(details.updateTime) }}·{{ details.songNum }}首歌
                </div>
                <div class="list-des">
                    {{ details.description }}
                </div>
            </div>
            <!-- 播放按钮部分-->
            <div class="song-list-fun">
                <div class="song-list-play">
                    <font-awesome-icon icon="fas fa-play" class="play-count-icon"/>
                    <span>播放</span>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import ItemImg from "@/minicomponents/ItemImg.vue";
import {timestampToTime} from "@/http/tools";

export default {
    name: "SongListHeader",
    methods: {timestampToTime},
    components: {ItemImg},
    props: ['details'],
    data() {
        return {
            // details: {
            //     songListId: '2340621859',
            //     title: '[国电新势力] 网易电子音乐人精选',
            //     titleImg: 'https://p1.music.126.net/oUzWIccBO1A5YOAOubgQ9w==/109951168282632898.jpg',
            //     creatorId: '48102',
            //     creator: '电音赫兹',
            //     updateTime: '1680513393502',
            //     songNum: 30,
            //     description: '别急\n甜甜的恋爱马上就轮到你了\n\n单身的女孩不要着急\n也许上帝心里的想法是\n我要给这个可爱的女孩留个特别的男孩\n\n单身的男孩也不要着急\n也许上帝心里的想法是\n我要给这个帅氣的男孩找个优秀的姑娘\n\n等到恋爱的那一天\n把这些歌全唱给ta吧',
            //     tags: [
            //         "华语",
            //         "说唱",
            //         "浪漫"
            //     ]
            // }
        }
    },
    computed: {
        imageDetail() {
            return {
                picUrl: this.details.titleImg,
                isShowInfo: false,
                isRound: false,
                playCount: 0,
                hasPlayIcon: true
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "../assets/less/common";

@fontSize: .8vw;

.el-row {
  cursor: default;
}

.list-title {
  font-size: 1.7vw;
  font-weight: bolder;
  margin: 1vw 0;
}

.list-creator {
  font-size: .9vw;
  font-weight: 400;
}

.list-update-time {
  font-size: @fontSize;
  //color: @metaphorFont;
  font-weight: 300;
}

.list-des {
  font-size: @fontSize;
  margin-top: 1.3vw;
  font-weight: 300;
  height: 3.3vw;
  /*多行文字溢出显示省略号*/
  overflow: hidden;
  text-overflow: ellipsis;
  /*弹性盒子模型显示*/
  display: -webkit-box;
  /*限制在一个块元素内显示文本的行数*/
  -webkit-line-clamp: 3;
  /*设置或检索伸缩盒对象的子元素的排列方式*/
  -webkit-box-orient: vertical;
}

.song-list-fun {
  margin-top: 1.5vw;
  height: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .song-list-play {
    color: @mainColor;
    font-size: .9vw;
    font-weight: 700;
    background-color: @bgColor;
    padding: .5vw .8vw;
    border-radius: .5vw;
    cursor: pointer;
    transition: all .2s ease;

    > span {
      margin-left: .4vw;
    }

    //&:hover {
    //  font-size: 1vw;
    //}
  }
}
</style>